<template>
  <view :class="[theme, 'p-30']">
    <view class="flex-row justify-around items-center text-28 fw-bold p-30 mt-30 ml-24 mr-24 b-rounded-30"
      style="background-image: linear-gradient(37deg,rgba(8, 23, 49, 0.6),rgba(39, 8, 39, 0.6)); backdrop-filter: blur(30rpx);">
      <view @click="uniNavigator({ url: '/pages/client/main/bill?type=1' })" class="items-center">
        <text class="color-label">龙珠</text>
        <text class="mt-20 color-stress">{{ info.coin || 0 }}</text>
      </view>
      <uv-line direction="col" length="60" color="rgba(255,255,255,0.3)" />
      <view @click="uniNavigator({ url: '/pages/client/main/bill?type=2' })" class="items-center">
        <text class="color-label">碎片</text>
        <text class="mt-20 color-stress">{{ info.coin_money || 0 }}</text>
      </view>
      <uv-line direction="col" length="60" color="rgba(255,255,255,0.3)" />
      <view @click="uniNavigator({ url: '/pages/client/main/bill?type=3' })" class="items-center">
        <text class="color-label">仓库</text>
        <text class="mt-20 color-stress">{{ info.money || 0 }}</text>
      </view>
    </view>

    <view class="mt-30 bg-section b-rounded-20 p-30">
      <text class="text-28 mr-24">接收方: </text>
      <input v-model="formData.target" class="mt-30 bg-base h-120 pl-24 pr-24 b-rounded-20" placeholder="请输入转赠对象ID或手机号"
        type="text">
    </view>

    <view class="mt-30 bg-section b-rounded-20 p-30">
      <text class="text-28 mr-24">转赠数量:</text>
      <view class="mt-30 flex-row items-center bg-base pr-24 b-rounded-20">
        <input v-model="formData.amount" class="flex-1 h-120 pl-24 pr-24" placeholder="请输入转赠数量" type="number">
        <button @click="+info.money && (formData.amount = String(+info.money))" hover-class="op-[0.6]"
          class="text-24 color-primary fw-bold !border-none" plain>全部</button>
      </view>
    </view>

    <button @click="beforeTransform" hover-class="op-[0.6]" style="margin: 100rpx 20rpx;"
      class="items-center justify-center bg-primary lh-100 color-base text-36 fw-bold b-rounded-50">
      转赠
    </button>

    <pay-password v-model="formData.password" @finish="transform" ref="passwordPopup" />
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { sleep, uniNavigator } from "@/common/libs/utils";
import { onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);
const info = ref({} as AnyObject);
const passwordPopup = ref({} as AnyObject);
const { $config = {} } = getApp().globalData || {};

const formData = reactive({
  target: "",
  password: "",
  amount: ""
});

onNavigationBarButtonTap(() => {
  uniNavigator({ url: "/pages/client/mine/integralTransformOrders" })
});

onLoad(() => {
  getInfo();
});

const getInfo = () => {
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      info.value = data;
      uni.hideToast();
    },
  });
}

const beforeTransform = () => {
  if (!formData.target) {
    return uni.showToast({ title: "请输入转赠对象ID或手机号", icon: "none" });
  }
  if (!formData.amount) {
    return uni.showToast({ title: "请输入积分数量", icon: "none" });
  }
  passwordPopup.value.change(true);
}

const transform = () => {
  passwordPopup.value.change(false);
  uni.request({
    url: "/reward",
    data: {
      coin: formData.amount,
      to_uid: formData.target,
      pay_pass: formData.password,
    },
    async success({ msg: title }: AnyObject) {
      uni.showToast({ title, duration: 1000 });
      await sleep(1);
      getInfo();
    }
  });
}

</script>

<style lang="scss" scoped>
// scss
</style>